import React, { useState, useEffect, useRef } from "react";
import { Tabs, Steps } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import "./index.less";
import moment from "moment";
const { Step } = Steps;

const MyWorkList: React.FC<any> = ({
  listTo,
  listAlready,
  specialProjectList,
  specialProjectListAlready,
}) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const goServiceEnterForm = (item: any) => {
    dispatch({
      type: "serviceEnterParams/onServiceEnterParams",
      payload: {
        serviceUserIdList: "",
        serviceDescribe: "",
        img: [],
        evaluateDesc: "",
        score: null,
      },
    });
    navigate(`/serviceEnterForm`, { state: { ...item }, replace: false });
  };
  return (
    // <Tabs>
    //   <Tabs.Tab title="待处理" key="1">
        <div className="myWork-box-list">
          {specialProjectList?.map((item) => (
            <div
              className="myWork-box-list-card"
              onClick={() => goServiceEnterForm(item)}
            >
              <div className="myWork-box-list-card-titlebg"></div>
              <div className="myWork-box-list-card-item">
                <div className="myWork-box-list-card-item-special">
                  <div>{item?.serveName || ""}</div>
                  <div>已完成次数{item?.count || 0}次</div>
                </div>
                <div className="myWork-box-list-card-item-time">
                  {item?.serveType || ""}
                </div>
                <div className="myWork-box-list-card-item-time">
                  计划完成次数{item?.flishedCount || 0}次
                </div>
                <div className="myWork-box-list-card-item-adress">
                  {`${moment(item?.startTime).format("YYYY-MM-DD")} - ${moment(
                    item?.endTime
                  ).format("YYYY-MM-DD")}` || ""}
                </div>
              </div>
            </div>
          ))}
          {listTo?.map((item) => (
            <div
              className="myWork-box-list-card"
              onClick={() =>
                navigate("/myWork/details", { state: { ...item, dcl: true } })
              }
            >
              <div className="myWork-box-list-card-titlebg"></div>
              <div className="myWork-box-list-card-item">
                <div className="myWork-box-list-card-item-title">
                  <div>{item?.formCommitData?.questiontitle || ""}</div>
                  <div>{item?.formCommitData?.eventType || ""}</div>
                </div>
                <div className="myWork-box-list-card-item-time">
                  {item?.formCommitData?.createTime || ""}
                </div>
                <div className="myWork-box-list-card-item-adress">
                  {item?.formCommitData?.hadress || ""}
                </div>
              </div>
              <div className="myWork-box-list-card-flow">
                <Steps current={1}>
                  <Step title="" />
                  <Step title="待处理" />
                  <Step title="" />
                </Steps>
              </div>
            </div>
          ))}
        </div>
    //   </Tabs.Tab>
    //   ()
    //   <Tabs.Tab title="已处理" key="2">
    //     <div className="myWork-box-list">
    //       {specialProjectListAlready?.map((item) => (
    //         <div className="myWork-box-list-card">
    //           <div className="myWork-box-list-card-titlebg"></div>
    //           <div className="myWork-box-list-card-item">
    //             <div className="myWork-box-list-card-item-special">
    //               <div>{item?.serveName || ""}</div>
    //               <div>已完成次数{item?.count || 0}次</div>
    //             </div>
    //             <div className="myWork-box-list-card-item-time">
    //               {item?.serveType || ""}
    //             </div>
    //             <div className="myWork-box-list-card-item-time">
    //               计划完成次数{item?.flishedCount || 0}次
    //             </div>
    //             <div className="myWork-box-list-card-item-adress">
    //               {`${moment(item?.startTime).format("YYYY-MM-DD")} - ${moment(
    //                 item?.endTime
    //               ).format("YYYY-MM-DD")}` || ""}
    //             </div>
    //           </div>
    //         </div>
    //       ))}
    //       {listAlready?.map((item) => (
    //         <div
    //           className="myWork-box-list-card"
    //           onClick={() => navigate("/myWork/details", { state: item })}
    //         >
    //           <div className="myWork-box-list-card-titlebg"></div>
    //           <div className="myWork-box-list-card-item">
    //             <div className="myWork-box-list-card-item-title">
    //               <div>{item?.formCommitData?.workFormNo || ""}</div>
    //               <div>{item?.formCommitData?.eventType || ""}</div>
    //             </div>
    //             <div className="myWork-box-list-card-item-time">
    //               {item?.formCommitData?.createTime || ""}
    //             </div>
    //             <div className="myWork-box-list-card-item-adress">
    //               {item?.formCommitData?.hadress || ""}
    //             </div>
    //           </div>
    //           <div className="myWork-box-list-card-flow">
    //             <Steps current={2}>
    //               <Step title="" />
    //               <Step title="" />
    //               <Step title="结束" />
    //             </Steps>
    //           </div>
    //         </div>
    //       ))}
    //     </div>
    //   </Tabs.Tab>
    // </Tabs>
  );
};
export default MyWorkList;
